<template>
	<view>
		<view class="form-gather-top">
			<view class="form-gather-img" v-if="cover_image!=''">
				<image :src="cover_image" mode="aspectFill"></image>
				<view class="" @click="uploadCoverImage">
					更换表单封面
				</view>
			</view>
			<view class="form-gather-img-no" @click="uploadCoverImage" v-else>
				<image :src="imglink + 'member/manage_icon_camera.png'"></image>
				<view >
					添加表单封面
				</view>
			</view>
			<view class="form-gather-act">
				<view class="form-gather-act-title">
					活动标题
				</view>
				<view class="form-gather-act-input">
					<textarea v-model="title" maxlength="50" placeholder="活动标题最多50个字"/>
					<view class="">
						{{title.length}}/50
					</view>
				</view>
			</view>
		</view>
		<view class="need-msg" v-if="collect_info_fields.length != 0">
			<view class="need-msg-title">
				需要收集的信息
			</view>
			<view class="">
				<view class="person-msg-details"  v-for="(field,index) in collect_info_fields" :key='index'>
					<view class="msg-tip">{{field.name}}</view>
					<view class="msg-input">
						<input type="text" disabled="true" v-model="field.value" :placeholder="field.placeholder"/>
						<view class="is-required">
							<image v-if="field.required == 1" :src="imglink + 'member/manage-active_icon_CheckBox_selected.png'" mode=""></image>
							<image v-else :src="imglink + 'member/manage-active_icon_CheckBox_normal.png'" mode=""></image>
							<text>是否必填</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="field-content">
			<view class="act_explain-title">
				<view class="explain-title">
					<view class=""></view>
					<view class="">
						默认可选字段
					</view>
				</view>
				<view class="explain_tip" @click="addField">
					+添加新字段
				</view>
			</view>
			<view class="field-details">
				<view :class="collect_info_field_indexs.indexOf(field.field_id) !== -1?'field-details-active':'field-details-noselect'" v-for="(field,index) in store_fields" :key='index' @click="chooseField(field)">
					{{ field.name }}
					<image class="del-filed" @click.stop="deleteField(field.field_id)" :src="imglink + 'member/manage-active_icon_delete.png'" mode=""></image>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="need-msg-operate">
			<view class="" @click="publishForm('0')">
				暂存表单
			</view>
			<view class="" @click="publishForm('1')">
				立刻发布
			</view>
		</view>
		<!-- 删除门店确认 -->
		<uni-popup ref="delField" :custom="true">
			<view class="popup_box_de_del">
				<view class="popup_box-tip">
					删除字段确认
				</view>
				<view class="popup_box-reminder">
					是否删除该字段，删除后无法恢复
				</view>
				<view class="popup_box-click">
					<view class="" @click="confirmDelete">确认删除</view>
					<view class="" @click="cancelDelete">取消</view>
				</view>
			</view>
		</uni-popup>
		<!-- 删除成功 -->
		<view class="save-popup" v-if="saveState">
			<view class="save-popup-img">
				<image :src="imglink + 'home/pop_icon_success.png'" mode=""></image>
			</view>
			<view class="save-popup-title">
				删除成功
			</view>
		</view>
		<!-- 添加新信息收集字段 -->
		<uni-popup ref="actPublish" :custom="true">
			<view class="popup_box_de">
				<image class="popup_box_close" :src="imglink + 'home/popup-close.png'" @click="closeState"></image>
				<view class="popup_box_content">
					<view class="popup_box_title">
						<view class="popup-line"></view>
						<view class="">添加新信息收集字段</view>
						<view class="popup-line"></view>
					</view>
					<view class="field-name">
						<view class="">
							字段名称
						</view>
						<input type="text" v-model="fieldName" placeholder="请输入字段名称" />
					</view>
					<view class="field-name">
						<view class="">
							字段类型
						</view>
						<view class="field-type">
							<radio-group @change="radioChangeType" style="justify-content: space-between;">
								<label class="uni-list-cell uni-list-cell-pd type-common" v-for="(item, index) in fieldTypes" :key="index">
									<view>
										<radio :value="item.value" color='#FF8B46' :checked="fieldType === item.value" />
									</view>
									<view>{{item.name}}</view>
								</label>
							</radio-group>
						</view>
					</view>
					<view class="field-name">
						<view class="">
							是否必填
						</view>
						<view class="field-type">
							<radio-group @change="handleSelectRequiredType">
								<label style="margin-right: 30upx;" class="uni-list-cell uni-list-cell-pd type-common" v-for="(item, index) in requiredTypes" :key="index">
									<view>
										<radio :value="item.value" color='#FF8B46' :checked="isRequired === item.value " />
									</view>
									<view>{{item.name}}</view>
								</label>
							</radio-group>
						</view>
					</view>
					<view class="sure-add-btn" @click="handleAddField">
						确定添加
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {uploadFile} from '@/common/alioss.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
		components:{uniPopup},
		data(){
			return {
				imglink: this.$store.state.imgLink,
				store_id:0,
				store_collect_info_id:0,
				cover_image:'',
				title:'',
				store_fields:[],
				collect_info_fields:[],
				collect_info_field_indexs:[],
				//添加新字段
				fieldName:'',
				fieldType:1,
				isRequired:1,
				fieldTypes:[
					{
						name:'文字',
						value:1
					},
				],
				requiredTypes:[
					{
						name:'必填',
						value:1
					},
					{
						name:'选填',
						value:0
					}
					
				],
				saveState: false,
				//删除字段
				deleteFieldId:0,
			}
		},
		onLoad(option) {
			
			// console.log(option)
			this.options = option
			let store_id = parseInt(option.store_id,10);
			if(!store_id>0){
				store_id = uni.getStorageSync('store_id')
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.store_id = store_id
			this.$store.commit('updateStoreId',store_id)
			
			if(!isNaN((option.store_collect_info_id,10))){
				this.store_collect_info_id = parseInt(option.store_collect_info_id,10)
			}
			
			
		},
		onShow(){
			if(!isNaN(this.store_collect_info_id) && parseInt(this.store_collect_info_id,10)>0){
				this.getActivityDown()
			}else{
				this.getStoreField()
			}
		},
		methods:{
			//获取当前表单收集信息
			getActivityDown(){
				
				const that = this
				const data = {
					store_id: that.store_id,
					token: that.token,
					store_collect_info_id: that.store_collect_info_id
				}
				
				that.$api.get_activity_down_info(data).then(res => {
					console.log(res);
					if(res.status){
						
						that.cover_image = res.data.cover_image
						that.title = res.data.title
						// this.collect_info_fields = []
						const collect_info_fields = res.data.fields
						for(var i = 0; i < collect_info_fields.length; i++) {
							console.log(i,'collect_info_fields');
							that.collect_info_fields.push({
								field_id:collect_info_fields[i].custom_field_id,
								name:collect_info_fields[i].name,
								required:collect_info_fields[i].required,
								placeholder:'请输入'+collect_info_fields[i].name
							})
							that.collect_info_field_indexs.push(collect_info_fields[i].custom_field_id)
						}
						
						that.getStoreField()
						
					}else{
						
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
					
					
				}).catch(err => {
					
					uni.showToast({
						title:err,
						icon:'none',
						duration:2000
					})
				})
			},
			// 获取当前店铺所有自定义字段
			getStoreField(){
				const that = this
				const data = {
					store_id: that.store_id,
					token: that.token,
				}
				that.store_fields = []
				that.$api.get_store_field(data).then(res => {
					// console.log(res);
					if(res.status){
						console.log(res.list,'res.list')
						if(res.list.length>0){
							
							for(let i=0;i<res.list.length;i++){
								
								let selected = 0
								if(that.collect_info_field_indexs.indexOf(res.list[i].field_id)){
									selected = 1
								}
								
								that.store_fields.push({
									field_id:res.list[i].field_id,
									name:res.list[i].name,
									required:res.list[i].required,
									placeholder:'请输入'+res.list[i].name,
									selected,
								})
							}
							
							console.log(that.store_fields,'that.store_fields')
							
						}
						
						
					}else{
						
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
					
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:2000
					})
				})
			},
			//上传图片
			uploadCoverImage(){
				const that = this
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
				    success: (chooseImageRes) => {
						// #ifdef H5
							if (!/\.(gif|jpg|jpeg|png|bmp)$/.test(chooseImageRes.tempFiles[0].name)) {
								uni.showToast({
									title:'图片类型必须为gif/jpg/jpeg/png/bmp',
									icon:'none',
									duration:2000
								})
								return false;
							}
						// #endif
						uni.getImageInfo({
							src: chooseImageRes.tempFilePaths[0],
							success: (image) => {
								uni.showLoading({
									title: '图片上传中...'
								})
								uploadFile(chooseImageRes.tempFilePaths[0]).then(res => {
									console.log(res)
									if(res.status){
										that.cover_image  = res.data.url
										uni.hideLoading()
									}
								}).catch(err => {
									console.log(err)
								})
							}
						})
				    }
				});
			},
			//添加字段
			addField(){
				this.$refs.actPublish.open()
			},
			closeState(){
				this.$refs.actPublish.close()
			},
			// 提交添加字段数据
			handleAddField(){
				if(this.fieldName == ''){
					uni.showToast({
						title:'请输入字段名称',
						icon:"none",
						duration:2000
					})
					return false
				}
				let data = {
					token:this.$store.getters.getToken,
					store_id:this.$store.getters.getStoreId,
					name:this.fieldName,
					type:this.fieldType,
					required:this.isRequired,
					status:1
				}
				this.$api.add_act_field(data).then( res => {
					// console.log(res)
					if(res.status){
						uni.showToast({
							title:'添加成功',
							icon:"none",
							duration:2000
						})
						this.fieldName = ''
						setTimeout(()=>{
							
							this.$refs.actPublish.close()
							this.getStoreField()
							
						},2000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch( err =>{
					uni.showToast({
						title:err,
						icon:'none',
						duration:2000
					})
				})
			},
			handleSelectRequiredType(e){
				console.log(e,'handleSelectRequiredType')
				this.isRequired = e.detail.value
			},
			//选择/取消选择字段
			chooseField(field){
				console.log(field,'chooseField');
				if(this.collect_info_field_indexs.indexOf(field.field_id)>-1){
					
					for(let i=0;i<this.collect_info_field_indexs.length;i++){
						
						if(this.collect_info_field_indexs[i] === field.field_id){
							
							this.collect_info_field_indexs.splice(i,1)
						}
					}
					
					for(let j=0;j<this.collect_info_fields.length;j++){
						
						if(this.collect_info_fields[j].field_id===field.field_id){
							this.collect_info_fields.splice(j,1)
						}
						
					}
					
				}else{
					
					this.collect_info_fields.push(field)
					this.collect_info_field_indexs.push(field.field_id)
				}
				
			},
			deleteField(id){
				this.deleteFieldId = id
				this.$refs.delField.open()
			},
			confirmDelete(){
				
				const that = this
				let data = {
					token:that.$store.getters.getToken,
					field_id:that.deleteFieldId
				}
				that.$api.del_field(data).then(res => {
					console.log(res)
					if(res.status){
						that.$refs.delField.close()
						that.saveState = true
						for(let i=0;i<that.collect_info_field_indexs.length;i++){
							
							if(that.collect_info_field_indexs[i] === that.deleteFieldId){
								
								that.collect_info_field_indexs.splice(i,1)
							}
						}
						
						for(let j=0;j<that.collect_info_fields.length;j++){
							
							if(that.collect_info_fields[j].field_id===that.deleteFieldId){
								that.collect_info_fields.splice(j,1)
							}
							
						}
						
						setTimeout(()=>{
							this.saveState = false
							this.getStoreField()
						},2000)
					}else{
						setTimeout(()=>{
							this.saveState = false
						},2000)
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			cancelDelete(){
				this.$refs.delField.close()
			},
			
			//发布表单
			publishForm(flag){
				if(this.cover_image == ''){
					uni.showToast({
						title:'请选择活动封面',
						icon:'none',
						duration:2000
					})
					return false
				}
				if(this.title == ''){
					uni.showToast({
						title:'请输入活动标题',
						icon:'none',
						duration:2000
					})
					return false
				}
				let data 
				if(this.options.page == "add"){
					data = {
						token:this.$store.getters.getToken,
						store_id:this.$store.getters.getStoreId,
						cover_image:this.cover_image,
						title:this.title,
						fieldMsg:JSON.stringify(this.store_fields),
						status:flag
					}
				}else{
					data = {
						token:this.$store.getters.getToken,
						store_collect_info_id:this.store_collect_info_id,
						store_id:this.$store.getters.getStoreId,
						cover_image:this.cover_image,
						title:this.title,
						fieldMsg:JSON.stringify(this.store_fields),
						status:flag
					}
				}
				console.log(data,"????????????????????????????????");
				if(this.options.page == "add"){
					this.$api.offline_form_publish(data).then(res => {
						console.log(res)
						if(res.status){
							uni.showToast({
								title:'添加活动发布成功',
								icon:'none',
								duration:2000
							})
							setTimeout(()=>{
								uni.removeStorageSync('actDownAdd')
								// uni.navigateBack({
								// 	delta:1
								// })
								uni.redirectTo({
									url:'/pages/memberCenter/formGatherManage/formGatherManage?store_id='+this.store_id
								})
							},1000)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none',
								duration:2000
							})
						}
					}).catch(err => {
						console.log(err)
					})
				}else{
					this.$api.edit_offline_form_publish(data).then(res => {
						console.log(res)
						if(res.status){
							uni.showToast({
								title:'编辑活动表单发布成功',
								icon:'none',
								duration:2000
							})
							setTimeout(()=> {
								uni.removeStorageSync('editActDown')
								uni.redirectTo({
									url:'/pages/memberCenter/formGatherManage/formGatherManage?store_id='+this.store_id
								})
							},1000)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none',
								duration:2000
							})
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},
			
		}
		
	}
</script>
<style>
	/* 删除地址成功标识css */
	.save-popup{
		width: 240upx;
		height: 240upx;
		border-radius: 12upx;
		background: rgba(58,58,58,0.9);
		position: fixed;
		top: 50%;left: 50%;
		transform: translate(-50%,-50%);
	}
	.save-popup-img{
		width: 72upx;
		height: 72upx;
		margin: 0 auto;
		margin-top: 58upx;
	}
	.save-popup-img>image{
		width: 100%;
		height: 100%;
	}
	.save-popup-title{
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		margin-top: 16upx;
	}
	/* 弹框样式 */
	.popup_box_de_del{
		height: 336upx;
		width: 640upx;
		background: #FFFFFF;
		border-radius: 24upx;
		padding-top: 40upx;
		box-sizing: border-box;
	}
	.popup_box-tip{
		text-align: center;
		color: #353535;
		font-size: 36upx;
		font-weight: 800;
	}
	.popup_box-reminder{
		width: 544upx;
		text-align: center;
		padding: 0 10upx;
		box-sizing: border-box;
		color: #666666;
		font-size: 30upx;
		margin: 0 auto;
		margin-top: 30upx;
	}
	.popup_box-click{
		width: 100%;
		height: 112upx;
		margin-top: 80upx;
		border-top: 1upx solid rgba(0, 0, 0, 0.1);
		display: flex;
	}
	.popup_box-click>view{
		width: 50%;
		line-height: 112upx;
		text-align: center;
		font-size: 34upx;
	}
	.popup_box-click>view:first-child{
		color: #000000;
		border-right: 1upx solid rgba(0, 0, 0, 0.1);
	}
	.popup_box-click>view:last-child{
		color: #FF8B46;
	}
	.add-shop-manage{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32upx;
		border-radius: 44upx;
		margin: 0 auto;
		margin-top: 152upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.del-icon>image{
		width: 48upx;
		height: 48upx;
		margin-top: 58upx;
	}
	.popup_box_de{
		height: 848upx;
		width: 590upx;
		position: relative;
		/* z-index: 999; */
	}
	.popup_box_close{
		width: 56upx;
		height: 56upx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.popup_box_content{
		width: 100%;
		height: 784upx;
		background: #FFFFFF;
		position: absolute;
		top: 64upx;left: 0;
		z-index: 999;
		border-radius: 16upx;
		padding: 0 20upx;
		box-sizing: border-box;
	}
	.popup_box_title{
		width: 100%;
		display: flex;
	}
	.popup-line{
		width: 84upx;
		height: 2upx;
		border-top: 1upx solid #DEDEDE;
		margin-top: 64upx;
		margin-right: 12upx;
	}
	.popup-line:first-child{
		margin-left: 28upx ;
	}
	.popup-line:last-child{
		margin-left: 12upx;
	}
	.popup_box_title>view:nth-child(2){
		color: #333333;
		font-size: 34upx;
		margin-top: 40upx;
	}
	.field-name{
		display: flex;
		width: 100%;
		height: 80upx;
		background: #F5F5F5;
		border-radius: 4upx;
		margin-top: 60upx;
	}
	.field-name>view:first-child{
		width: 27%;
		text-align: center;
		line-height: 80upx;
		background: #ECECEC;
		color: #333333;
		font-size: 28upx;
	}
	.field-name>input{
		flex-grow: 1;
		height: 80upx;
		padding: 20upx;
		box-sizing: border-box;
		font-size: 28upx;
	}
	radio-group{
		padding: 0 20upx 0 26upx;
		box-sizing: border-box;
	}
	.field-type,radio-group{
		flex-grow: 1;
		display: flex;
	}
	.type-common{
		display: flex;
	}
	.type-common>view>radio{
		transform:scale(0.8);
	}
	.type-common>view{
		color: #333333;
		font-size: 28upx;
		line-height: 80upx;
	}
	.sure-add-btn{
		width: 480upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		border-radius: 44upx;
		font-size: 32upx;
		color: #FFFFFF;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		background: linear-gradient(to right,#FE9543,#FF664F);
		margin: 0 auto;
		margin-top: 80upx;
	}
	page{
		background: #F3F3F4;
	}
	.form-gather-top{
		width: 100%;
		background: #FFFFFF;
		margin-bottom: 20upx;
	}
	.form-gather-img,.form-gather-img-no{
		width: 100%;
		height: 422upx;
		position: relative;
	}
	.form-gather-img-no{
		background: #F5F5F5;
	}
	.form-gather-img-no>image{
		width: 200upx;
		height: 160upx;
		margin-top: 100upx;
		margin-left: 50%;
		transform: translate(-50%,0);
	}
	.form-gather-img-no>view{
		text-align: center;
		font-size: 30upx;
		color: #333;
		margin-top: 20upx;
	}
	.form-gather-img>image{
		width: 100%;
		height: 100%;
	}
	.form-gather-img>view{
		width: 228upx;
		height: 56upx;
		line-height: 56upx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 35upx;
		background: rgba(50, 50, 50, 0.8);
		font-size: 26upx;
		position: absolute;
		bottom: 30upx;right: 30upx;
	}
	.form-gather-act{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
	}
	.form-gather-act-title{
		margin-left: 18upx;
		color: #333333;
		font-size: 30upx;
	}
	.form-gather-act-input{
		width: 100%;
		height: 120upx;
		background: #F5F5F5;
		border-radius: 4upx;
		margin-top: 20upx;
		position: relative;
		padding: 20upx 20upx 10upx;
		box-sizing: border-box;
	}
	.form-gather-act-input>textarea{
		width: 100%;
		height: 100%;
		font-size: 28upx;
	}
	.form-gather-act-input>view{
		color: #999999;
		font-size: 22upx;
		position: absolute;
		bottom: 10upx;right: 20upx;
	}
	.need-msg{
		width: 100%;
		margin-bottom: 20upx;
		padding-left: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.need-msg-title{
		text-align: center;
		padding: 30upx 0;
		box-sizing: border-box;
		color: #333333;
		font-size: 34upx;
	}
	.person-msg-details{
		width: 100%;
		padding: 32upx 30upx 28upx 0;
		box-sizing: border-box;
		display: flex;
		border-bottom: 1upx solid #DEDEDE;
	}
	.person-msg-details:last-child{
		border-bottom: 0;
	}
	.msg-tip{
		width: 112upx;
		color: #666666;
		font-size: 28upx;
		text-align: center;
	}
	.msg-input{
		flex-grow: 1;
		display: flex;
		margin-left: 40upx;
	}
	.msg-input>input{
		flex-grow: 1;
		font-size: 28upx;
	}
	.is-required{
		display: flex;
		margin-top: 8upx;
	}
	.is-required>image{
		width: 28upx;
		height: 28upx;
	}
	.is-required>text{
		color: #999999;
		font-size: 22upx;
	}
	.sex-child,radio-group{
		display: flex;
		flex-grow: 1;
	}
	.sex-common{
		display: flex;
		margin-right: 100upx;
	}
	.sex-common>view{
		font-size: 28upx;
		color: #333333;
	}
	.field-content{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 18upx;
	}
	.act_explain-title{
		display: flex;
		justify-content: space-between;
	}
	.explain-title{
		display: flex;
		margin-top: 4upx;
	}
	.explain-title>view:first-child{
		width: 8upx;
		height: 32upx;
		background: #FF8B46;
		vertical-align: middle;
		margin-top: 6upx;
	}
	.explain-title>view:last-child{
		color: #333333;
		font-size: 30upx;
		margin-left: 10upx;
		font-weight: 800;
	}
	.explain_tip{
		width: 176upx;
		height: 48upx;
		line-height: 48upx;
		text-align: center;
		border: 1upx solid #FF8B46;
		color: #FF8B46;
		font-size: 24upx;
		border-radius: 40upx;
	}
	.field-details{
		width: 100%;
		display: flex;
	}

	.need-msg-operate{
		display: flex;
		justify-content: space-around;
		margin-top: 52upx;
		padding-bottom: 30upx;
		box-sizing: border-box;
	}
	.need-msg-operate>view{
		width: 47%;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		border-radius: 44upx;
		font-size: 32upx;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.need-msg-operate>view:first-child{
		color: #FF8B46;
		border: 2upx solid #FF8B46;
	}
	.need-msg-operate>view:last-child{
		color: #FFFFFF;
		background: linear-gradient(to right,#FE9543,#FF664F);
	}
	.field-details{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.field-details>view{
		width: 152upx;
		height: 56upx;
		text-align: center;
		line-height: 56upx;
		font-size: 28upx;
		border-radius: 28upx;
		margin-right: 20upx;
		margin-top: 26upx;
		position: relative;
	}
	.del-filed{
		width: 32upx;
		height: 32upx;
		position: absolute;
		top: -14upx;right: -12upx;
	}
	.field-details-noselect{
		background: #F2F2F2;
	}
	.field-details-active{
		background: #FF8B46;
		color: #FFFFFF;
	}
</style>